<template>
  <div class="schedule-box">
    <div class="schedule-top">
      <img
        src="~assets/mine/schedule_img.png"
        class="schedule-img"
      >
      <div class="schedule-time">
        {{ courseInfo.StartTime }} - {{ courseInfo.EndTime }}
      </div>
    </div>
    <div class="course-name">
      {{ courseInfo.CourseName }}
    </div>
    <div class="class-name">
      {{ courseInfo.ClassName }}
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    courseInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data () {
    return {

    }
  },
})
</script>

<style lang="scss" scoped>
.schedule-box {
  line-height: normal;
}
.schedule-top {
  height: 84px;
  display: flex;
  align-items: center;
  @include px1border(bottom, #E9E9E9);
}
.schedule-img {
  width: 32px;
  height: 32px;
  margin-right: 20px;
}
.schedule-time {
  color: #333;
  font-size: 30px;
}
.course-name {
  color: #333;
  font-size: 32px;
  margin-top: 30px;
  min-height: 67px;
  @include ellipsis(2);
  word-break: break-all;
  word-wrap:break-word;
}
.class-name {
  color: #4B515E;
  font-size: 26px;
  margin-top: 30px;
  @include ellipsis;
}
</style>
